<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	version="1.0">
	<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ACME Bike</title>
<link href="app3.css" type="text/css" rel="stylesheet"/>
<!-- <script type="text/javascript"
	src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$().ready(function() {
		$('.summary-row').click(function() {
			$(this).next().toggle();
		});
	});
</script> -->
</head>
<body>
	<br/>
	<table id="data-table">
		<!-- Colgroup -->
		<colgroup>
			<col class="data-table-odd"/>
			<col class="data-table-even"/>
			<col class="data-table-odd"/>
			<col class="data-table-even"/>
		</colgroup>
		<thead>
			<tr style="background-color: #DDDDDD">
				<th style="width:80px">Year</th>
				<th style="width:200px">Brand</th>
				<th style="width:500px">Model</th>
				<th style="width:150px">Rating</th>
			</tr>
		</thead>
		<xsl:for-each select="models/model">
		<tr class="summary-row" >
			<td><xsl:value-of select="year" /></td>
			<td><xsl:value-of select="manufacturer" /></td>
			<td><xsl:value-of select="@name" /></td>
			<xsl:if test="rating/votes &gt; 0">
			<td align='right'><xsl:value-of select="rating/score" /> of 5 (<xsl:value-of select="rating/votes"/> votes)</td>
			</xsl:if>
			<xsl:if test="rating/votes = 0">
			<td align='right'><xsl:value-of select="rating/score" /></td>
			</xsl:if>
		</tr>
		<tr class="child">
			<td colspan="4" class='detail'>
				<table id="detail-table">
					<tr>
						<th colspan="2">
							<xsl:value-of select="@name" /> Frameset
						</th>
					</tr>
					<xsl:for-each select="frameset/element">
					<tr>
						<td class='name'><xsl:value-of select="@name" /> </td>
						<td class='value'><xsl:value-of select="." /></td>
					</tr>
					</xsl:for-each>
					
					<tr>
						<th colspan="2">
							<xsl:value-of select="@name" /> Wheels
						</th>
					</tr>
					<xsl:for-each select="wheels/element">
					<tr>
						<td class='name'><xsl:value-of select="@name" /> </td>
						<td><xsl:value-of select="." /></td>
					</tr>
					</xsl:for-each>
					
					<tr>
						<th colspan="2">
							<xsl:value-of select="@name" /> Drivetrain
						</th>
					</tr>
					<xsl:for-each select="drivetrain/element">
					<tr>
						<td class='name'><xsl:value-of select="@name" /> </td>
						<td><xsl:value-of select="." /></td>
					</tr>
					</xsl:for-each>
					
					<tr>
						<th colspan="2">
							<xsl:value-of select="@name" /> Components
						</th>
					</tr>
					<xsl:for-each select="components/element">
					<tr>
						<td class='name'><xsl:value-of select="@name" /> </td>
						<td><xsl:value-of select="." /></td>
					</tr>
					</xsl:for-each>
					
					<tr>
						<th colspan="2">
							Review
						</th>
					</tr>
					<tr>
						<td class='value' colspan="2">
						<xsl:for-each select="review">
							<xsl:value-of select="." /><br/>
						</xsl:for-each>
						</td>
					</tr>
					
				</table>
			</td>
		</tr>
		</xsl:for-each>
		
	</table>
	</body>
</html>
	</xsl:template>
</xsl:stylesheet>

